<template>
  <div class="app">
    app 组件

    <ul>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/news">新闻</router-link>
      </li>

      <li>
        <router-link to="/news/100">新闻100</router-link>
      </li>

      <li>
        <router-link to="/news/200">新闻200</router-link>
      </li>
      <li>
        <router-link to="/list">列表</router-link>
      </li>
      <li>
        <router-link to="/user">用户</router-link>
      </li>
    </ul>


    <!--  路由的出口 显示的位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs, ref } from "vue"


export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //这里存放数据
  setup () {
    const data = reactive({

    })
    return {
      data
    }
  }
}
</script>

<style lang="css" scoped>
.router-link-active {
  color: red;
}
</style>
